<template>
	<view class="tabbar">
		<view v-for="(item,index) in tabbars" :key="index" @click="frames(item,index)"
			style="display: flex;flex-direction: column;text-align: center;justify-content: center;align-items: center;margin-right: 40rpx;">
			<u-icon :name="item.icon" :color="testfall==index ? '#096' : '#FFFFFF' " size="30"></u-icon>
			<view style="font-size: 24rpx;" :style="testfall==index ? '#096' : '#FFFFFF'">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		data() {
			return {
				tabbars: [{
						icon: 'coupon-fill',
						text: 'AI聊天'
					},
					{
						icon: 'server-man',
						text: 'AI绘图'
					}
				],
				testfall: 0
			};
		},
		props: {
			type: {
				default: null
			}
		},
		mounted() {
			this.testfall = this.type
		},
		methods: {
			frames(e, a) {
				console.log(e, a, '乡村振兴')
				this.testfall = a
				if (a == 2) {
					uni.navigateTo({
						url: '/pages/information/occupation',
						animationType: 'slide-in-top',
						animationDuration: 200
					})
				}
				if (a == 1) {
					uni.navigateTo({
						url: '/pages/information/Drawing',
						animationType: 'fade-in',
						animationDuration: 200
					})
				}
				if (a == 0) {
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/gpt',
							animationType: 'fade-in',
							animationDuration: 200
						})
					}, 500)

				}
			}
		}
	}
</script>

<style>
	.tabbar {
		display: flex;
		align-items: center;
	}
</style>